<script>
import dayjs from "dayjs";

export default {
  name: "myappointpage",
  data() {
    return {
      memberDetail: {

      },
      device: {},
      deviceData: {

      }
    }
  },
  onShow() {
    this.$api.memberDetail(uni.getStorageSync('memberId')).then(res => {
      this.memberDetail = res
      if (res.avatar_url) {
        this.memberDetail.avatar_url = res.avatar_url
      }
      if (!res.device_id) {
        uni.showToast({
          title: '请先绑定设备',
          icon: 'none'
        })
        return
      }
      this.device = res.device || {}
      // 获取设备数据 当天
      this.$api.deviceDataList({
        device_id: res.device_id,
        member_id: this.memberId,
        start_time: dayjs().format('YYYY-MM-DD'),
        end_time: dayjs().format('YYYY-MM-DD')
      }).then(res2 => {
        if (res2) {
          this.deviceData = res2[0]
        }
      })
    })
  },
}
</script>

<template>
  <div>
    <div class="devicename">{{device.name }}</div>
    <view id="navView">
      <view class="navItemView">
        <img src="../../static/index/circle.png"/>
        <view class="numshow1">
          <view>
            {{ deviceData.hydrogen_concentration || '' }}
          </view>
          <view>
            mg/m³
          </view>
        </view>
        <text>氨气浓度</text>
      </view>
      <view class="navItemView">
        <img src="../../static/index/circle.png"/>
        <view class="numshow2">{{ deviceData.temperature || '' }}℃</view>
        <text>温度</text>
      </view>
      <view class="navItemView">
        <img src="../../static/index/circle.png"/>
        <text>湿度</text>
        <view class="numshow2">{{ deviceData.humidity || '' }}％</view>
      </view>
      <view class="navItemView">
        <img src="../../static/index/circle.png"/>
        <text>生态液</text>
        <view class="numshow1">
          <view>

          </view>
          <view>
            {{ deviceData.ecological_liquid || '' }} ％
          </view>
        </view>
      </view>
      <view class="navItemView">
        <img src="../../static/index/circle.png"/>
        <text>运行状态</text>
        <view class="numshow2">{{ deviceData.run_status ? '正常' : '关闭'}}</view>
      </view>
      <view class="navItemView">
        <img src="../../static/index/circle.png"/>
        <text>是否清洗</text>
        <view class="numshow2">{{ deviceData.clean_status ? '是' : '否' }}</view>
      </view>
    </view>
  </div>
</template>

<style lang="scss">
.devicename {
  padding: 50rpx 0;
  text-align: center;
  color: #FFFFFF;
  font-size: 28rpx;
}
.index {
  height: 100%;
  position: relative;
  z-index: 2;
}
.devicePopup {
  padding: 30rpx;
}
.devicePopup-content {
  padding: 100rpx 20rpx;
  text-align: center;
}
/* 顶部搜索框 */
/* # 是通过id查找 ； 在微信小程序中使用的单位是rpx，1pt=1px=2rpx*/
#searchOuterView{
  padding: 15rpx;
}
.all{
  position: fixed;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#searchInnerView{
  text-align: center;
  width: 720rpx;
  height: 70rpx;
  background: #eeeeee;
  border: 2rpx solid #FFFFFF;
  border-radius: 8rpx;
  line-height: 58rpx;
  box-sizing: border-box; /* 设置边框包含在宽高之内 */
  opacity: 0.5;
  padding: 0 20rpx !important;
  input {
    padding: 0 20rpx;
  }
}
#searchInnerView > text{
  font-size: 25rpx;
  color: #B1B1B1;
}

#DevView{
  width: auto;
  height: 150rpx;
  color:aliceblue;
  padding: 0px;
  display: flex;
  margin: 10px;
  background: rgba(146, 148, 245, 0.3);
  border: 1px solid rgba(146, 148, 245, 0.3);
  border-radius: 3px;
}
.deva, .devb{
  width: 100%;
  height: 150rpx;
  text-align: center;
}
.devb{
  border-left: 1px dotted rgba(121, 122, 207, 0.7);
}
.dev1 text{
  height: 75rpx;
  line-height: 75rpx;
  text-align: center;
}

/* 主要状态显示菜单 */
#navView{
  display: flex;  /* 应用flex布局 ，所有的子元素排在一行*/
  flex-wrap: wrap; /* 换行*/
  height: 500rpx;
  align-content: space-around; /* 多行垂直排列*/
  font-size: 30rpx;
  font-weight: 500;
  color: rgb(109, 255, 128);
  justify-content: center;
}
.navItemView{
  width: 30%;
  text-align: center;
  position: relative;
  text {
    display: inline-block;
    width: 100%;
    text-align: center;
  }
}
.navItemView > img{
  width: 200rpx;
  height: 200rpx;
}
.numshow1,.numshow2{
  width: 80rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 25rpx;
  color:rgb(214, 205, 194);
}
.numshow1{
  width: 100%;
  text-align: center;
  margin-top: -20rpx;
}
.numshow2{
  height: 40%;
}


/* 开关按钮 */
.switch1{
  width: 100%;
  height: 300rpx;
  line-height: 100rpx;
  font-size: 50rpx;
  text-align: center;
}
.switch1-view {
  width: auto;
  margin-top: 20rpx;
  margin-left: 50rpx;
}
</style>
